{% extends 'master/layout_menu.html' %}
{% load form_tag %}

{% block css %}
    <style>
        .form-group{
            margin-bottom: 18px;
        }
        .form-error{
            font-size:8px;position: absolute;bottom: -17px;color:#EC6868;margin:0 15px;left:0px;right:0px;  background: #f2dede;padding: 0 5px;
        }
        .alert{
            padding:5px;
            margin-bottom:10px;
            border-radius:0px;
        }
    </style>
{% endblock %}

{% block breadcrumb %}
    <li><a href="/home/index/">首页</a></li>
    <li><a href="#">资产管理</a></li>
    <li class="active">录入资产</li>
{% endblock %}


{% block content %}
        <div class="clearfix">
            {% if tips %}
                {% if tip_status %}
                    <div class="col-md-offset-4 col-md-4">
                        <div class="alert alert-success" role="alert">
                            <i class="fa fa-check"></i>
                            {{ tips }}
                        </div>
                    </div>
                {% else %}
                    <div class="col-md-offset-4 col-md-4">
                        <div class="alert alert-danger" role="alert" >
                            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                            {{ tips }}
                        </div>
                    </div>
                {% endif %}
            {% endif %}
        </div>
        <!--添加数据的form表单-->
        <form class="form-horizontal clearfix" method="POST" action="/cmdb/add/">

            <div  class="form-group col-md-6">
                <label for="inputEmail3" class="col-md-3 control-label">IP：</label>
                <div id="IP" class="col-md-8">
                    {{ model.ip }}
                </div>
            </div>
            <div class="form-group col-md-6">
                <label for="inputEmail3" class="col-md-3 control-label">端口：</label>
                <div id="PORT" class="col-md-8">
                    {{ model.port }}
                </div>
            </div>
            <div class="form-group col-md-6">
                <label for="inputEmail3" class="col-md-3 control-label">状态：</label>
                <div id="ZHUANGTAI" class="col-md-8">
                    {{ model.zhuangtai }}
                </div>
            </div>
            <div class="form-group col-md-6">
                <label for="inputEmail3" class="col-md-3 control-label">业务：</label>
                <div id="YEWU" class="col-md-8">
                    {{ model.yewu }}
                </div>
            </div>
            <!--把下面的col-md-12什么数字变大则输入框也会变大-->
{#            <div class="form-group col-md-12">#}
{#                <label for="inputEmail3" class="control-label col-md-2" style="width: 12.1%;">业务：</label>#}
{#                <div class="col-md-10" style="width: 81%">#}
{#                    {{ model.yewu }}#}
{#                </div>#}
{#            </div>#}
            <!--以下为普通提交-->
            <div class="form-group col-md-6">
                <div class="col-md-offset-3 col-md-8">
                     <input type="submit" class="btn btn-primary no-radius" value="提 交">
                </div>
            </div>
            <!--以下为ajax提交-->
            <div class="form-group col-md-6">
                <div class="col-md-offset-3 col-md-8">
                     <input type="button" class="btn btn-primary no-radius" onclick="AjaxSubmit();" value="Ajax提交"/>
                </div>
            </div>
        </form>


{#        <form action="/cmdb/add/" method="post">#}
{#            <input type="text" name="ip1"/>#}
{#            <input type="text" name="port1"/>#}
{#            <input type="text" name="zhuangtai1"/>#}
{#            <input type="text" name="yewu1"/>#}
{#            <input type="submit" value="新建数据"/>#}
{#        </form>#}



{% endblock %}


{% block js %}
    <script src="/static/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
            //ajax添加数据
        function AjaxSubmit(){
            //通过ajax将数据提交给/cmdb/add/页面，/cmdb/add/经过函数处理，添加到数据库
            var _ip = $("#IP input").val();
            var _port = $("#PORT input").val();
            var _zhuangtai = $("#ZHUANGTAI input").val();
            var _yewu = $("#YEWU input").val();
            $.ajax({
                url:'/cmdb/add/',
                type:'POST',
                data:{ip:_ip,port:_port,zhuangtai:_zhuangtai,yewu:_yewu},
                success:function(arg){
                }
            });
        }

        $(function(){
            $.InitMenu('#import_single');
        })
    </script>
{% endblock %}